<template>
  <div class="">
    <div>111</div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'

  function testPromise(ready: boolean) {
    return new Promise((resolve, reject) => {
      if (ready) {
        resolve('正确')
      } else {
        reject('捕获错误')
      }
    })
  }
  function testAsync(str: string) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(str)
      }, 1000)
    })
  }
  async function testAwt() {
    const result = await testAsync('hello world')
    console.log(result)
    console.log('阻塞')
  }
  console.log('同步代码')

  // 测试执行顺序
  // async function async1() {
  //   console.log('async start')
  //   await async2()
  //   console.log('async end')
  //   setTimeout(() => {
  //     console.log('timer1')
  //   }, 0)
  // }
  // async function async2() {
  //   setTimeout(() => {
  //     console.log('timer2')
  //   }, 0)
  //   console.log('async2')
  // }
  // async1()
  // setTimeout(() => {
  //   console.log('timer3')
  // }, 0)
  // console.log('start')

  // 测试 Promise.race()
  // async function runAsync(x: number) {
  //   const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  //   return p
  // }
  // Promise.race([runAsync(1), runAsync(2), runAsync(3)])
  //   .then(res => {
  //     console.log('result', res)
  //   })
  //   .catch(err => {
  //     console.log('err', err)
  //   })

  // 链式调用
  // const age = ref<number>(0)
  // function Person() {
  //   age.value = 20 //默认值为20;
  // }
  // Person.prototype.setAge = function (num: number) {
  //   age.value = num
  // }
  // Person.prototype.getAge = function (num: number) {
  //   return age.value
  // }

  // Promise实现图片异步加载
  function imageAsync(url: string) {
    return new Promise((resolve, reject) => {
      let image = new Image()
      image.src = url
      image.onload = () => {
        resolve(image)
      }
      image.onerror = (err: any) => {
        reject(err)
      }
    })
  }
  imageAsync('https://p26-passport.byteacctimg.com/img/user-avatar/15bcb5a35ff00895d1cbc73d76a934ed~100x100.awebp')
    .then(res => {
      console.log(res, '加载成功')
    })
    .catch(err => {
      console.log(err, '加载失败')
    })

  onMounted(() => {
    // let result = Promise.race([testPromise(true), testAwt()])
    // console.log(result, 'result')
    testAwt()
    // console.log('同步代码')
    // let resulit1 = testPromise(true)
    //   .then((res) => {
    //     console.log(res, "res");
    //   })
    //   .catch((err) => {
    //     console.log(err, "err");
    //   });
    // console.log(resulit1, "resulit1");
  })
</script>

<style lang="less" scoped></style>
